<%
local dsp = require "luci.dispatcher"
-%>
<script type="text/javascript">//<![CDATA[
	XHR.poll(5, '<%=url('admin/network/dev_app_status')%>', null,
		function(x, st)
		{
			var tb = document.getElementById('user_status_table');
			var dev_list_str=JSON.stringify(st);
			if (st && tb)
			{
				while(tb.rows.length > 1)
					tb.deleteRow(1);
				var devlist = st.devlist
				for(var i = 0; i < devlist.length; i++ )
				{
					var hostname=""
					if(devlist[i].hostname == "" || devlist[i].hostname == "*"){
						hostname="--";
					}
					else{
						hostname=devlist[i].hostname;
					}
					var tr = tb.insertRow(-1);
					tr.className = 'tr cbi-rowstyle-' + ((i % 2) + 1);
					tr.insertCell(-1).innerHTML = i + 1;
					tr.insertCell(-1).innerHTML = hostname;
					tr.insertCell(-1).innerHTML = "<a href='<%=url('admin/network/appfilter/')%>"+devlist[i].mac+"'>"+devlist[i].mac+"</a>";
					tr.insertCell(-1).innerHTML = devlist[i].ip;
					var app_list_str="";
					for (var j = 0; j < devlist[i].applist.length; j++){
						console.log(devlist[i].applist[j].name);
						app_list_str+=devlist[i].applist[j].name;
						if (j != devlist[i].applist.length - 1)
						app_list_str+=","
					}
					if(app_list_str == ""){
						app_list_str="--"
					}
					tr.insertCell(-1).innerHTML = app_list_str;
					if (devlist[i].online == 1){
						tr.insertCell(-1).innerHTML = "<%:Online%>";
					}else{
						tr.insertCell(-1).innerHTML = "<%:Offline%>";
					}
					var childs = tr.childNodes;
					Array.prototype.forEach.call(childs,function(child){
						child.className = 'td';
					
					});
				}
			}
		}
	);

//]]></script>


<div class="cbi-section cbi-tblsection">
	<h3><%:Client List%></h3>
	<table class="table cbi-section-table" id="user_status_table">
		<tr class="tr table-titles">
			<th class="th"><%:Id%></th>
			<th class="th"><%:Hostname%></th>
			<th class="th"><%:Mac%></th>
			<th class="th"><%:Ip%></th>
			<th class="th"><%:Common App(TOP5)%></th>
			<th class="th"><%:Online Status%></th>
		</tr>
		<tr class="tr">
			<td class="td" colspan="8"><em><br /><%:Collecting data...%></em></td>
		</tr>
	</table>
</div>
